<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <!-- 响应式-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.2.4/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
    <link rel="stylesheet" href="../static/css/typo.css">
    <link rel="stylesheet" href="../static/lib/prism/prism.css">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
    <title>详情页</title>
</head>
<body>
<!--导航-->
<nav th:replace="_fragments :: menu(1)" class="ui inverted attached  segment m-padded-tb-mini stackable">
</nav>

<!--中间部分-->
<div class="m-container m-container-small m-padded-tb-large">
    <div class="ui js-toc-content container">
        <div class="ui top attached segment">
            <div class="ui grid">
                <div class="eleven wide column">
                    <div class="ui horizontal link list">
                        <div class="item">
                            <img th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image">
                            <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}"></a>
                            </div>
                        </div>
                        <div class="item">
                            <i class="calendar icon"></i> <span
                                th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}"></span>
                        </div>
                        <div class="item">
                            <i class="eye icon"></i> <span th:text="${blog.views}"></span>
                        </div>
                    </div>
                </div>
                <div class="right aligned five wide column">
                </div>
            </div>

        </div>
        <div class="ui attached segment">
            <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui fluid rounded image">

        </div>
        <div class="ui attached padded segment">
            <!--内容-->
            <div class="ui right aligned segment basic">
                <div class="ui label basic orange" th:text="${blog.flag}">原创</div>
            </div>
            <h2 class="center aligned ui header" th:text="${blog.title}">
                关于刻意练习的清单
            </h2>
            <div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large"
                 th:utext="${blog.content}">
                hhhhhhhh

            </div>
            <!-- 标签 -->
            <div class="m-padded-lr" >
                <div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}" th:text="${tag}">方法论</div>
            </div>
            <div class="ui center aligned basic segment">
                <button id="payButton" class="ui orange basic circular button" th:if="${blog.appreciation == true}">赞赏
                </button>
            </div>
            <!--二维码-->
            <div class="ui payQR flowing popup transition hidden">
                <div class="ui orange  basic label">
                    <div class="ui images center" style="font-size: inherit !important;">
                        <div class="image">
                            <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}" alt=""
                                 class="ui rounded bordered image"
                                 style="width:120px">
                            <div class="center">支付宝支付</div>
                        </div>
                        <div class="image">
                            <img src="../static/images/WeChat.jpg" th:src="@{/images/WeChat.jpg}"
                                 class="ui rounded bordered image"
                                 style="width:120px">
                            <div class="">微信支付</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="ui positive message attached">
            <!--middle是垂直方向上的居中-->
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                    <ul class="ui list">
                        <li>作者：<span th:text="${blog.user.nickname}"></span><a href="/about">(联系作者)</a></li>
                        <li>发表时间：<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}"></span></li>
                        <li>版权声明：自由转载-非商用-非衍生-保持署名</li>
                        <li>公众号转载：请在文末添加作者公众号二维码</li>
                    </ul>
                </div>
                <div class="five wide column">
                    <img src="../static/images/WeChat.jpg" th:src="@{/image/wx.jpg}" alt=""
                         class="ui rounded right floated image bordered"
                         style="width: 200px;height: 200px">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="m-padded m-fixed m-right-bottom">
    <div class="ui buttons vertical icon">
        <button type="button" class="ui button toc  teal">目录</button>
        <a href="#comment-container" class="ui button teal">留言</a>
        <button class="ui button icon wechat">
            <i class="ui icon weixin"></i>
        </button>
        <a href="#" class="ui icon button">
            <i class="ui icon chevron"></i>
        </a>
    </div>
</div>

<!--.ui.flowing.popup没有最大宽度限制-->
<div class="ui toc-container flowing popup transition hidden">
    <ol class="js-toc" style="width: 250px !important;">

    </ol>
</div>

<!--尾部-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
</footer>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
<script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
<script th:inline="Javascript">

    $('#newBlog-container').load('/footer/newBlog')

    $('.menu.toggle').click(
        function () {
            $('.m-item').toggleClass('m-mobile-hide');
        }
    )

    $('#payButton').popup({
        popup: $('.payQR.popup'),
        on: 'click',
        position: 'bottom center'
    })

    $('.toc.button').popup({
        popup: $('.toc-container.popup'),
        on: 'click',
        position: 'left center'
    });

    $('.wechat').popup({
        popup: $('.wechat-qr'),
        position: 'left center'
    });

    // var serurl = "127.0.0.1:8080";
    // var url = /*[[@{/blog/{id}(id=${blog.id})}]]*/"";
    // var qrcode = new QRCode("qrcode",{
    //     text: serurl+url,
    //     width: 110,
    //     height: 110,
    //     colorDark: "#000000",
    //     colorLight: "#ffffff",
    //     correctLevel: QRCode.CorrectLevel.H
    // })

    /*前端校验*/
    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入评论内容'
                }
                ]
            },
            content: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '请输入你的大名'
                }]
            },
            type: {
                identifier: 'email',
                rules: [{
                    type: 'email',
                    prompt: '请填写正确的邮箱地址'
                }]
            }
        }
    });
    $('#commentpost-btn').click(function () {
        var boo = $('.ui.form').form('validate form');
        if (boo) {
            console.log('校验成功');
            postData();
        } else {
            console.log('校验失败');
        }

    });
    function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentNickname = $(obj).data('commentnickname');
        $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
        $("[name='parentComment.id']").val(commentId);
        $(window).scrollTo($('#comment-form'),500);
    }



    $(function () {
        var commentUrl = /*[[@{/comments/{id}(id=${blog.id})}]]*/"";
        $("#comment-container").load(commentUrl);
    });


    /*表单提交*/
    function postData() {
        $("#comment-container").load("/comments", {
            "parentComment.id": $("[name='parentComment.id']").val(),
            "blog.id": $("[name='blog.id']").val(),
            "nickname": $("[name='nickname']").val(),
            "content": $("#textarea").val(),
            "email": $("[name='email']").val()
        }, function (responseTxt, statusTxt, xhr) {
            $(window).scrollTo($('#comment-container'),500);
            clearContent();
        });
    }
    function clearContent() {
        $("[name='content']").val('');
        $("[name='parentComment.id']").val(-1);
        $("[name='content']").attr("placeholder", "请输入评论信息");
    }

    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: true,
    });
</script>
</body>
</html>